<template>
    <svg class="svg-icon icon" :width="props.size" :height="props.size" :style="getStyle">
        <use :href="`#svg-icon-${props.name}`" />
    </svg>
</template>
<script setup lang="ts">
import { computed, type CSSProperties } from 'vue';

const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    size: {
        type: [Number, String],
        default: 20,
    },
    color: {
        type: String,
        default: '',
    },
});

defineOptions({
    name: 'SvgIcon',
});

const getStyle = computed((): CSSProperties => {
    if(props.color===''){
      return {};
    } else {
      return {
        color: props.color
      };
    }
});
</script>
<style scoped>
.svg-icon {
    fill: currentColor;
    overflow: hidden;
    vertical-align: middle;
}
</style>
